import React from 'react';
import { Modal, Button, Space, Input, Form } from 'antd';
import './index.css';
import { SvgIcon } from '@/components/icon';
import { ExclamationCircleFilled, MailOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import useWindowWidth from '@/hooks/event/use-window-width';
import { useTranslation } from 'react-i18next';

interface AdviceModalProps {
  visible: boolean;
  actIcon: number;
  setActIcon: (value: number) => void;
  inputValue: string;
  setInputValue: (value: string) => void;
  onCancel: () => void;
  onConfirm: (actId: number, text: string) => void;
}

const AdviceModal: React.FC<AdviceModalProps> = ({
  visible,
  onCancel,
  onConfirm,
  actIcon,
  setActIcon,
  inputValue,
  setInputValue,
}) => {
  const { t } = useTranslation();

  const { isPc } = useWindowWidth();

  const hotImages = [
    { icon: 'advice1', greyIcon: 'advice-grey1', actColor: '#CE33E6', color: 'red', id: 1 },
    { icon: 'advice2', greyIcon: 'advice-grey2', actColor: '#6C82FF', color: 'red', id: 2 },
    { icon: 'advice3', greyIcon: 'advice-grey3', actColor: '#C966FF', color: 'red', id: 3 },
    { icon: 'advice4', greyIcon: 'advice-grey4', actColor: '#946BF1', color: 'red', id: 4 },
    { icon: 'advice5', greyIcon: 'advice-grey5', actColor: '#6B53FF', color: 'red', id: 5 },
  ];

  return (
    <Modal
      open={visible}
      onCancel={onCancel}
      closable={true}
      width={512}
      className="model-css"
      title={
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <SvgIcon
            icon="home-user-email"
            size={20}
            color="#4C40F5"
            style={{ marginRight: '6px' }}
          />
          {t('page.homePage.userFeedback')}
        </div>
      }
      footer={
        <div style={{ textAlign: 'end' }}>
          <Space size={10}>
            <Button
              // style={{ background: '#FFFFFF', borderRadius: '8px', border: '1px solid #4C40F5' }}
              onClick={onCancel}
            >
              {t('page.homePage.talkLater')}
            </Button>
            <Button
              // style={{
              //   borderRadius: '8px',
              //   backgroundColor: actIcon && inputValue.length > 0 ? '#4C40F5' : '#D5D5D5',
              // }}
              type="primary"
              disabled={actIcon && inputValue.length > 0 ? false : true}
              onClick={() => onConfirm(actIcon, inputValue)}
            >
              {t('page.homePage.sure')}
            </Button>
          </Space>
        </div>
      }
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <div style={{ textAlign: 'start' }}>{t('page.homePage.isEnjoyConversation')}</div>

        <div
          style={{
            marginTop: '18px',
          }}
          className="grid grid-cols-5 gap-2"
        >
          {hotImages.map((item, index) => {
            return (
              <div
                key={item.id}
                className={`${actIcon == item.id ? 'bg-indigo-100' : 'bg-gray-200 hover:bg-indigo-100'
                  }`}
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  height: isPc ? '70px' : '50px',
                  // backgroundColor: actIcon == item.id ? '#E1E9FF' : '#F2F5FD',
                  borderRadius: '8px',
                  cursor: 'pointer',
                }}
                onClick={() => {
                  if (actIcon && actIcon == item.id) {
                    setActIcon(0);
                  } else {
                    setActIcon(item.id);
                  }
                }}
              >
                <SvgIcon
                  key={index}
                  icon={actIcon == item.id ? hotImages[index].icon : hotImages[index].greyIcon}
                  size={isPc ? 44 : 30}
                  // color={actIcon == item.id ? hotImages[index].actColor : hotImages[index].color}
                  color={hotImages[index].color}
                  style={{
                    padding: '0px',
                    marginRight: '6px',
                    // backgroundColor: '#E5E7ED',
                    borderRadius: '8px',
                  }}
                />
              </div>
            );
          })}
        </div>

        <div style={{ textAlign: 'start', marginTop: '22px' }}>
          {t('page.homePage.userFeedbackText')}
        </div>

        <div style={{ textAlign: 'start', marginTop: '22px', marginBottom: '20px' }}>
          <Input.TextArea
            showCount
            maxLength={200}
            value={inputValue}
            onChange={(e) => {
              setInputValue(e.target.value);
            }}
            style={{
              background: '#FFFFFF',
              borderRadius: '8px',
              border: '1px solid #D5D5D5',
              height: '110px',
              resize: 'none',
            }}
          ></Input.TextArea>
        </div>
      </div>
    </Modal>
  );
};

export default AdviceModal;
